<!--  -->
<template>
  <div class="update-photo">
    <img :src="img" ref="img" />
    <div class="toolbar">
      <div class="cancel" @click="$emit('close')">取消</div>
      <div class="confirm" @click="onComfirm">完成</div>
    </div>
  </div>
</template>

<script>
// 裁剪图片的插件 Cropper
import 'cropperjs/dist/cropper.css';
import { Toast } from 'mint-ui';
import Cropper from 'cropperjs';
import { UpdateUserImgModel } from 'models/userInfo.js';
import { mapState,mapMutations } from 'vuex';

export default {
  name: 'UpdatePhoto',
  props: {
    img: {
      type: [String, Object],
      required: true
    },
    img1: {
      type: [String, Object],
      required: true
    }
  },
  data() {
    return {
      cropper: null // 裁切器
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['updateImg']),
    onComfirm() {
      const updateUserImgModel = new UpdateUserImgModel();
      updateUserImgModel.updateUserImg(this.img1, this.userInfo.id).then((res) => {
        const data = res.data;

        if (res && res.status === 0) {
          this.updateImg(this.img1);
          this.$emit('close');
          Toast(data.msg);
        }

        Toast(data.msg);
      })
    }
  },
  mounted() {
    const image = this.$refs.img
    
    this.cropper = new Cropper(image, {
      viewMode: 1, // 截图的移动范围
      dragMode: 'move', // 移动方式
      aspectRatio: 1, // 截图的缩放比例
      autoCropArea: 1,
      cropBoxMovable: false, // 截图是否可移动
      cropBoxResizable: false, // 截图方块的缩放
      background: false, // 背景是否显示
      movable: true // 是否可移动
    })
  }
}
</script>

<style lang='scss' scoped>
@import '~styles/mixins.scss';

.update-photo {
  background-color: black;
  height: 100%;
  overflow: hidden;

  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;

    .cancel,
    .confirm {
      @include vh-center;
      padding: .1rem;
      font-size: .16rem;
      color: #fff;
    }
  }
}

img {
  margin-top: 50%;
  display: block;
  max-width: 100%;
}
</style>
